<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="人脸编号" prop="indexCode">
        <el-input v-model="dataForm.indexCode" placeholder="人脸编号"></el-input>
      </el-form-item>
      <el-form-item label="所属组别" prop="faceGroupIndexCode">
        <el-select v-model="dataForm.faceGroupIndexCode" clearable placeholder="请选择">
          <el-option v-for="item in faceGroupList" :key="item.indexCode" :label="item.name" :value="item.indexCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人脸的名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="dataForm.sex" clearable placeholder="请选择">
          <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人脸的证件类别" prop="certificateType">
        <el-select v-model="dataForm.certificateType" clearable placeholder="请选择">
          <el-option v-for="item in certificateTypes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificateNum">
        <el-input v-model="dataForm.certificateNum" placeholder="证件号码"></el-input>
      </el-form-item>
      <el-form-item label="身份证图片" prop="faceUrl">
          <el-upload
            class="upload"
            :action="getUploadUrl"
            :headers="headers"
            list-type="picture-card"
            :show-file-list="false"
            accept="image/*"
            :on-success="handleUpSuccess"
            :on-error="handleUpError"
            :on-change="handleUpUpload"
            :on-preview="handleUpPreview"
            :on-remove="handleUpRemove">
            <img  v-if="dataForm.faceUrl" :src="dataForm.faceUrl" style="float:left;width:100%;height: 100%">
            <i v-else class="el-icon-plus"></i>
          </el-upload>
      </el-form-item>

      <el-form-item label="录入设备号" prop="deviceNumber">
        <el-input v-model="dataForm.deviceNumber" placeholder="录入设备号"></el-input>
      </el-form-item>
      <el-form-item label="设备位置" prop="location">
        <el-input v-model="dataForm.location" placeholder="设备位置"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getObj, addObj, getFaceGroup,putObj } from '@/api/hik/face'
import store from "@/store";

export default {
  data() {
    return {
      faceGroupList: [],
      dialogVisible: false,
      disabled: false,
      visible: false,
      canSubmit: false,
      getUploadUrl:'/admin/sys-file/upload',
      imagesUp:'',
      dataForm: {
        id: 0,
        indexCode: '',

        faceGroupIndexCode: '',


        name: '',
        sex: '',
        certificateType: '',
        certificateNum: '',
        faceUrl: '',
        createTime: '',
        updateTime: '',
        deviceNumber: '',

        protocol: '',

        location: '',

      },
      dataRule: {
        indexCode: [
          { required: true, message: '人脸唯一标识符不能为空', trigger: 'blur' }
        ],

        faceGroupIndexCode: [
          { required: true, message: '人脸库唯一标识符不能为空', trigger: 'blur' }
        ],

        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],

        sex: [
          { required: true, message: '性别，1-男性，2-女性，UNKNOWN-未知不能为空', trigger: 'blur' }
        ],

        certificateType: [
          { required: true, message: '证件类型，111-身份证，OTHER-其它证件不能为空', trigger: 'blur' }
        ],

        certificateNum: [
          { required: true, message: '证件号码不能为空', trigger: 'blur' }
        ],

        faceUrl: [
          { required: true, message: '人脸照片信息不能为空', trigger: 'blur' }
        ],

        deviceNumber: [
          { required: true, message: '录入设备号不能为空', trigger: 'blur' }
        ],

        protocol: [
          { required: true, message: '传输协议不能为空', trigger: 'blur' }
        ],

        location: [
          { required: true, message: '设备位置不能为空', trigger: 'blur' }
        ],

      },
      //，1-男性，2-女性，UNKNOWN-未知
      sexs: [{
        value: '1',
        label: '男性'
      }, {
        value: '2',
        label: '女性'
      }, {
        value: 'UNKNOWN',
        label: '未知'
      }],
      //证件类型，111-身份证，OTHER-其它证件
      certificateTypes: [{
        value: '111',
        label: '身份证'
      }, {
        value: 'OTHER',
        label: '其它证件'
      }],
      protocols: [{
        value: 'POST',
        label: 'POST'
      }, {
        value: 'GET',
        label: 'GET'
      }],
    }
  },
  // 页面刚一加载就调用的方法
  created() {
    this.getGroupDataList()
  },
  computed: {
    headers: function () {
      const tenantId = store.getters.userInfo.tenantId
      return {
        'Authorization': "Bearer " + store.getters.access_token,
        'TENANT-ID': tenantId ? tenantId : '1'
      };
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          getObj(this.dataForm.id).then(response => {
            this.dataForm = response.data.data
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm).then(data => {
              this.$notify.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          } else {
            addObj(this.dataForm).then(data => {
              this.$notify.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          }
        }
      })
    },
    getGroupDataList() {
      this.dataListLoading = true
      getFaceGroup(Object.assign({})).then(response => {
        // console.log(response.data.data);
        this.faceGroupList = response.data.data
        this.dataListLoading = false
      }
      )

    },
    handleUpSuccess(response,file, fileList) {
      this.dataForm.faceUrl=response.data.url;
    },
    handleUpError(err, file, fileList) {
      console.log(file);
    },
    handleUpUpload(file,fileList) {
      console.log(file);
    },
    handleUpRemove(file,fileList) {
      console.log(file);
    },
    handleUpPreview(file) {
      this.dataForm.faceUrl = "";
      this.imagesUp = [];
      this.hideUp = false;
    },

  }
}
</script>
